<template>
    <div class="standardList">
        <van-search
            @focus='searchFocus'
            v-model="searchvalue"
            shape="round"
            background="#1989fa"
            placeholder="请输入搜索关键词"
        />
        <van-popup 
            v-model="showSearch" 
            get-container="body" 
            position='top'
        >
             <van-cell  title="请输入搜索条件" title-class='fw'/>
            <van-field label-width="140px" type="digit" v-model="searchform.fsamplereportcode" label="样品检验委托单编号:"  />
            <van-field label-width="140px" type="digit" v-model="searchform.fgathercode" label="样品采集单编号:"  />
            <van-cell is-link title="抽样开始时间:" :value="searchform.fbegindate" @click="showBdateClick"/>
            <van-popup v-model="showBdate" get-container="body" position='bottom'>
                <van-datetime-picker
                    v-model="CurrentDate"
                    type="date"
                    :formatter="formatter"
                    @confirm='beginConfirm'
                    @cancel='beginCancel'
                />
            </van-popup>
            <van-cell is-link title="抽样结束时间:" :value="searchform.fenddate" @click="showEdateClick"/>
            <van-popup v-model="showEdate" get-container="body" position='bottom'>
                <van-datetime-picker
                    v-model="fbilldateCurrentDate"
                    type="date"
                    :formatter="formatter"
                    @confirm='endConfirm'
                    @cancel='endCancel'
                />
            </van-popup>
            <div style="width:100%;display:flex; justify-content:  flex-end">
                <van-button @click="getDataInfo" style="margin:10px" type="info" size="small">搜索</van-button>
            </div>
            
        </van-popup>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="margin-bottom:50px">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <van-swipe-cell v-for="item in list" :key="item" :title="item" style="text-align:left">
                <van-panel title="采集单编号：120202020"  status="状态：提交">
                <div class='listConent'>
                    <div class='listLi'>
                        检验委托单编号：11111111
                    </div>
                    <div class='listLi'>
                       <van-dropdown-menu :overlay='false' >
                            <van-dropdown-item title="操作">
                            <div  class='iconAndText van-hairline--bottom'>
                                <van-icon name="edit" size='22' style="line-height:30px;margin-right:6px"/>
                                <span>修改</span>
                            </div>
                            <div  class='iconAndText van-hairline--bottom'>
                                <van-icon name="delete" size='22' style="line-height:30px;margin-right:6px"/>
                                <span>删除</span>
                            </div>
                            <div  class='iconAndText'>
                                <van-icon name="certificate"  size='22' style="line-height:30px;margin-right:6px"/>
                                <span>提交</span>
                            </div>
                        </van-dropdown-item>
                        </van-dropdown-menu>
                    </div>
                </div>
                <div class='listConent'>
                    <div class='listLi'>
                        样品号：11111
                    </div>
                   
                </div>
                <div slot="footer">
                    <div class='listBtns'>
                        <van-icon name="eye-o" color="#ff976a"  size='24' />
                        <van-icon name="setting-o" color="#1989fa" size='24'/>
                    </div>
                </div>
                </van-panel>
                <van-button
                    slot="right"
                    square
                    style="height:100%"
                    text="删除"
                    type="danger"
                    class="delete-button"
                />
            </van-swipe-cell>
        </van-list>
        </van-pull-refresh>
        
        <div class='listBottomBtn' @click="toAddStandard">前往新增</div>
    </div>
</template>

<script>
import { 
    Button
    ,NavBar
    ,Icon
    ,PullRefresh 
    ,Toast
    ,List
    ,SwipeCell
    ,Collapse
    , CollapseItem
    ,Divider
    ,Panel
    ,DropdownMenu
    , DropdownItem
    ,Search
    ,Dialog
    , Popup
    ,Field
    ,DatetimePicker
    ,Cell
    ,CellGroup
    ,Picker
    } from 'vant';
import {
    searchsamplegather
} from '@/api/sampleList'
export default {
    name: 'standardList',
    components: {
        [NavBar.name]:NavBar,
        [Button.name]:Button,
        [Icon.name]:Icon,
        [PullRefresh.name]:PullRefresh,
        [List.name]:List,
        [SwipeCell.name]:SwipeCell,
        [Collapse.name]:Collapse,
        [CollapseItem.name]:CollapseItem,
        [Divider.name]:Divider,
        [Panel.name]:Panel,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [Search.name]:Search,
        [Dialog.name]:Dialog,
        [Popup.name]:Popup,
        [Field.name]:Field,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [DatetimePicker.name]:DatetimePicker,
        [Picker.name]:Picker,
    },
    data () {
        return {
            showBdate:false,
            showEdate:false,
            CurrentDate: new Date(),
            fbilldateCurrentDate:new Date(),
            searchform:{
                fsamplereportcode:'',
                fgathercode:'',
                fbegindate:'',
                fenddate:''
            },
            showSearch:false,
            totalCount:0,
            pagenumber :1,
            searchvalue:'',
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            fuserid:'bb5a8fe0-e03e-42ba-a1ed-279bba27b3a3',
            fuseridwx:'o42mZxHZdK2AmdKvC4ECvzExXaaY',
        }
    },
    methods:{
        dateToString(date){ 
            var year = date.getFullYear(); 
            var month =(date.getMonth() + 1).toString(); 
            var day = (date.getDate()).toString();  
            if (month.length == 1) { 
                month = "0" + month; 
            } 
            if (day.length == 1) { 
                day = "0" + day; 
            }
            var dateTime = year + "-" + month + "-" + day;
            return dateTime; 
        },
        formatter(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`
            } else if (type === 'day') {
                return `${val}日`
            }
            return val;
        },
        endConfirm(val){
            this.searchform.fenddate =  this.dateToString(val)
            this.showEdate = false
        },
        endCancel(){
            this.showEdate = false
        },
        beginConfirm(val){
            this.searchform.fbegindate =  this.dateToString(val)
            this.showBdate = false
        },
        beginCancel(){
            this.showBdate = false
        },
        showBdateClick(){
            this.showBdate = true
        },
        showEdateClick(){
            this.showEdate = true
        },
        searchFocus(){
            this.showSearch = true
        },
        getDataInfo(){
            searchsamplegather({
                searchvalue:this.searchvalue,
                fuserid:this.fuserid,
                fuseridwx:this.fuseridwx,
                pagenumber:this.pagenumber,
                ftype:0,
                fbegindate:this.searchform.fbegindate,
                fenddate:this.searchform.fenddate,
            }).then(res=>{
                console.log(res)
                this.list = res.pageResult.results
                this.totalCount = res.pageResult.totalCount
                this.showSearch = false
            })
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
        onLoad() {
          if (this.isLoading) {
                this.list = [];
                this.isLoading = false;
            }
            searchsamplegather({
                searchvalue:this.searchvalue,
                fuserid:this.fuserid,
                fuseridwx:this.fuseridwx,
                pagenumber:this.pagenumber,
                ftype:0
            }).then(res=>{
                console.log(res)
                this.totalCount = res.pageResult.totalCount
                res.pageResult.results.forEach(element => {
                    this.list.push(element);
                });
                console.log(this.list)
                this.pagenumber = res.pageResult.pageNo
                this.loading = false;
                if (this.list.length >= res.pageResult.totalCount) {
                    this.finished = true;
                }
            })
        },
        toAddStandard(){
            this.$router.push({path:"/addSample"});
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.listBtns{
    text-align: right
}
.listConent{
    display: flex;
    width:90%;
    margin:0 auto
}
.listLi{
    width:50%;
    text-align: center;
    line-height: 30px;
}
.listBottomBtn{
    line-height: 40px;
    width:100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    left:0;
    background-color: #1989fa;
    color:white;  
}
.fw{
    font-weight: 700
}
</style>
